<!DOCTYPE html>
        <html lang="zh-CN">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>交易记录 - USDTMarket</title>
            <script src="https://cdn.tailwindcss.com"></script>
            <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
            <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
            
            <script>
                tailwind.config = {
                    theme: {
                        extend: {
                            colors: {
                                primary: '#165DFF',
                                success: '#36D399',
                                danger: '#F87272',
                                dark: '#1E293B',
                                light: '#F1F5F9',
                                'dark-blue': '#0F172A',
                                'light-blue': '#E0E7FF',
                            },
                            fontFamily: {
                                inter: ['Inter', 'sans-serif'],
                            },
                        }
                    }
                }
            </script>
            
            <style type="text/tailwindcss">
                @layer utilities {
                    .content-auto {
                        content-visibility: auto;
                    }
                    .scrollbar-hide {
                        -ms-overflow-style: none;
                        scrollbar-width: none;
                    }
                    .scrollbar-hide::-webkit-scrollbar {
                        display: none;
                    }
                    .glass {
                        background: rgba(255, 255, 255, 0.2);
                        backdrop-filter: blur(10px);
                        -webkit-backdrop-filter: blur(10px);
                    }
                    .card-hover {
                        transition: all 0.3s ease;
                    }
                    .card-hover:hover {
                        transform: translateY(-3px);
                        box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.1);
                    }
                    .menu-item.active {
                        border-left-color: theme('colors.primary');
                        background-color: theme('colors.primary/10');
                        color: theme('colors.light');
                    }
                    .transaction-item {
                        transition: all 0.2s ease;
                    }
                    .transaction-item:hover {
                        background-color: rgba(22, 93, 255, 0.05);
                    }
                }
            </style>
        </head>
        <body class="font-inter bg-gradient-to-br from-dark-blue to-dark min-h-screen text-light">
            <!-- 导航栏 -->
            <header class="fixed top-0 left-0 right-0 z-50 transition-all duration-300" id="navbar">
                <div class="container mx-auto px-4 py-3 flex items-center justify-between glass border-b border-white/10">
                    <div class="flex items-center space-x-2">
                        <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
                            <i class="fa fa-exchange text-white text-xl"></i>
                        </div>
                        <h1 class="text-xl font-bold bg-gradient-to-r from-primary to-success bg-clip-text text-transparent">USDT<span class="text-sm font-normal ml-1">Market</span></h1>
                    </div>
                    
                    <nav class="hidden md:flex items-center space-x-8">
                        <a href="#" class="text-white/70 hover:text-primary transition-colors">首页</a>
                        <a href="#" class="text-white/70 hover:text-primary transition-colors">购买USDT</a>
                        <a href="#" class="text-white/70 hover:text-primary transition-colors">出售USDT</a>
                        <a href="#" class="text-primary font-medium">交易记录</a>
                        <a href="#" class="text-white/70 hover:text-primary transition-colors">用户中心</a>
                    </nav>
                    
                    <div class="flex items-center space-x-4">
                        <div class="relative">
                            <button class="flex items-center space-x-2 px-4 py-2 rounded-lg bg-primary/20 text-primary hover:bg-primary/30 transition-colors">
                                <i class="fa fa-user-circle-o text-xl"></i>
                                <span class="hidden md:inline">用户12345</span>
                                <i class="fa fa-angle-down"></i>
                            </button>
                        </div>
                        <button class="md:hidden text-white text-xl">
                            <i class="fa fa-bars"></i>
                        </button>
                    </div>
                </div>
            </header>

            <!-- 主内容区 -->
            <main class="container mx-auto px-4 pt-24 pb-16">
                <!-- 面包屑导航 -->
                <div class="mb-8 text-sm text-white/60">
                    <a href="#" class="hover:text-primary transition-colors">首页</a> &gt; <span class="text-white">交易记录</span>
                </div>
                
                <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
                    <!-- 侧边栏 -->
                    <div class="lg:col-span-1">
                        <div class="bg-dark-blue rounded-2xl p-6 border border-white/10 sticky top-24">
                            <div class="flex items-center space-x-4 mb-6">
                                <div class="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center text-primary">
                                    <i class="fa fa-user-circle-o text-3xl"></i>
                                </div>
                                <div>
                                    <h3 class="font-bold text-lg">用户12345</h3>
                                    <p class="text-white/60 text-sm">普通用户</p>
                                </div>
                            </div>
                            
                            <div class="space-y-2">
                                <a href="#" class="menu-item flex items-center space-x-3 px-4 py-3 rounded-lg border-l-4 border-transparent hover:bg-white/5 transition-colors">
                                    <i class="fa fa-home w-5 text-center"></i>
                                    <span>个人主页</span>
                                </a>
                                <a href="#" class="menu-item flex items-center space-x-3 px-4 py-3 rounded-lg border-l-4 border-transparent hover:bg-white/5 transition-colors">
                                    <i class="fa fa-money w-5 text-center"></i>
                                    <span>我的钱包</span>
                                </a>
                                <a href="#" class="menu-item flex items-center space-x-3 px-4 py-3 rounded-lg border-l-4 border-transparent hover:bg-white/5 transition-colors active">
                                    <i class="fa fa-exchange w-5 text-center"></i>
                                    <span>交易记录</span>
                                </a>
                                <a href="#" class="menu-item flex items-center space-x-3 px-4 py-3 rounded-lg border-l-4 border-transparent hover:bg-white/5 transition-colors">
                                    <i class="fa fa-credit-card w-5 text-center"></i>
                                    <span>收款方式</span>
                                </a>
                                <a href="#" class="menu-item flex items-center space-x-3 px-4 py-3 rounded-lg border-l-4 border-transparent hover:bg-white/5 transition-colors">
                                    <i class="fa fa-shield w-5 text-center"></i>
                                    <span>账户安全</span>
                                </a>
                                <a href="#" class="menu-item flex items-center space-x-3 px-4 py-3 rounded-lg border-l-4 border-transparent hover:bg-white/5 transition-colors">
                                    <i class="fa fa-cog w-5 text-center"></i>
                                    <span>账户设置</span>
                                </a>
                            </div>
                            
                            <div class="mt-8 pt-6 border-t border-white/10">
                                <button class="w-full px-4 py-3 bg-danger/20 text-danger rounded-lg hover:bg-danger/30 transition-colors flex items-center justify-center space-x-2">
                                    <i class="fa fa-sign-out"></i>
                                    <span>退出登录</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 主内容 -->
                    <div class="lg:col-span-3">
                        <!-- 交易记录筛选 -->
                        <div class="bg-dark-blue rounded-2xl p-6 border border-white/10 mb-8">
                            <h2 class="text-xl font-bold mb-6">交易记录筛选</h2>
                            
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                                <div>
                                    <label class="block text-white/70 text-sm font-medium mb-2" for="transaction-type">
                                        交易类型
                                    </label>
                                    <select id="transaction-type" class="w-full px-4 py-3 bg-dark border border-white/10 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-white">
                                        <option value="all">全部类型</option>
                                        <option value="recharge">充值</option>
                                        <option value="withdraw">提现</option>
                                        <option value="buy">购买</option>
                                        <option value="sell">出售</option>
                                    </select>
                                </div>
                                
                                <div>
                                    <label class="block text-white/70 text-sm font-medium mb-2" for="transaction-status">
                                        交易状态
                                    </label>
                                    <select id="transaction-status" class="w-full px-4 py-3 bg-dark border border-white/10 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-white">
                                        <option value="all">全部状态</option>
                                        <option value="pending">处理中</option>
                                        <option value="success">已完成</option>
                                        <option value="failed">已失败</option>
                                        <option value="cancelled">已取消</option>
                                    </select>
                                </div>
                                
                                <div>
                                    <label class="block text-white/70 text-sm font-medium mb-2" for="transaction-date">
                                        日期范围
                                    </label>
                                    <select id="transaction-date" class="w-full px-4 py-3 bg-dark border border-white/10 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-white">
                                        <option value="7days">最近7天</option>
                                        <option value="30days">最近30天</option>
                                        <option value="90days">最近90天</option>
                                        <option value="custom">自定义</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                                <div>
                                    <label class="block text-white/70 text-sm font-medium mb-2" for="start-date">
                                        开始日期
                                    </label>
                                    <input type="date" id="start-date" class="w-full px-4 py-3 bg-dark border border-white/10 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-white">
                                </div>
                                
                                <div>
                                    <label class="block text-white/70 text-sm font-medium mb-2" for="end-date">
                                        结束日期
                                    </label>
                                    <input type="date" id="end-date" class="w-full px-4 py-3 bg-dark border border-white/10 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-white">
                                </div>
                            </div>
                            
                            <div class="flex flex-col sm:flex-row gap-4">
                                <button class="w-full sm:w-auto px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors font-medium flex items-center justify-center gap-2">
                                    <i class="fa fa-search mr-1"></i> 搜索
                                </button>
                                <button class="w-full sm:w-auto px-6 py-3 bg-dark rounded-lg border border-white/10 text-white hover:bg-white/10 transition-colors font-medium flex items-center justify-center gap-2">
                                    <i class="fa fa-refresh mr-1"></i> 重置
                                </button>
                                <button class="w-full sm:w-auto px-6 py-3 bg-dark rounded-lg border border-white/10 text-white hover:bg-white/10 transition-colors font-medium flex items-center justify-center gap-2">
                                    <i class="fa fa-download mr-1"></i> 导出
                                </button>
                            </div>
                        </div>
                        
                        <!-- 交易记录列表 -->
                        <div class="bg-dark-blue rounded-2xl p-6 border border-white/10">
                            <div class="flex justify-between items-center mb-6">
                                <h2 class="text-xl font-bold">交易记录列表</h2>
                                <div class="text-white/60 text-sm">共 <span class="text-primary font-medium">24</span> 条记录</div>
                            </div>
                            
                            <div class="overflow-x-auto">
                                <table class="w-full text-left">
                                    <thead>
                                        <tr class="text-white/60 text-sm border-b border-white/10">
                                            <th class="pb-3 font-medium">交易ID</th>
                                            <th class="pb-3 font-medium">类型</th>
                                            <th class="pb-3 font-medium">金额</th>
                                            <th class="pb-3 font-medium">状态</th>
                                            <th class="pb-3 font-medium">时间</th>
                                            <th class="pb-3 font-medium">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="transaction-item border-b border-white/5">
                                            <td class="py-4 text-sm">#TRX-20250626-56789</td>
                                            <td class="py-4">
                                                <span class="px-2 py-1 bg-primary/20 text-primary rounded-full text-xs">购买</span>
                                            </td>
                                            <td class="py-4 font-medium">-200.00 USDT</td>
                                            <td class="py-4">
                                                <span class="px-2 py-1 bg-success/20 text-success rounded-full text-xs">已完成</span>
                                            </td>
                                            <td class="py-4 text-white/60 text-sm">2025-06-26 10:30</td>
                                            <td class="py-4">
                                                <button class="text-primary hover:underline text-sm">查看详情</button>
                                            </td>
                                        </tr>
                                        <tr class="transaction-item border-b border-white/5">
                                            <td class="py-4 text-sm">#TRX-20250625-12345</td>
                                            <td class="py-4">
                                                <span class="px-2 py-1 bg-success/20 text-success rounded-full text-xs">充值</span>
                                            </td>
                                            <td class="py-4 font-medium">+500.00 USDT</td>
                                            <td class="py-4">
                                                <span class="px-2 py-1 bg-success/20 text-success rounded-full text-xs">已完成</span>
                                            </td>
                                            <td class="py-4 text-white/60 text-sm">2025-06-25 14:30</td>
                                            <td class="py-4">
                                                <button class="text-primary hover:underline text-sm">查看详情</button>
                                            </td>
                                        </tr>
                                        <tr class="transaction-item border-b border-white/5">
                                            <td class="py-4 text-sm">#TRX-20250624-67890</td>
                                            <td class="py-4">
                                                <span class="px-2 py-1 bg-success/20 text-success rounded-full text-xs">充值</span>
                                            </td>
                                            <td class="py-4 font-medium">+200.00 USDT</td>
                                            <td class="py-4">
                                                <span class="px-2 py-1 bg-primary/20 text-primary rounded-full text-xs">处理中</span>
                                            </td>
                                            <td class="py-4 text-white/60 text-sm">2025-06-24 09:15</td>
                                            <td class="py-4">
                                                <button class="text-primary hover:underline text-sm">查看详情</button>
                                            </td>
                                        </tr>
                                        <tr class="transaction-item border-b border-white/5">
                                            <td class="py-4 text-sm">#TRX-20250623-54321</td>
                                            <td class="py-4">
                                                <span class="px-2 py-1 bg-primary/20 text-primary rounded-full text-xs">购买</span>
                                            </td>
                                            <td class="py-4 font-medium">-300.00 USDT</td>
                                            <td class="py-4">
                                                <span class="px-2 py-1 bg-success/20 text-success rounded-full text-xs">已完成</span>
                                            </td>
                                            <td class="py-4 text-white/60 text-sm">2025-06-23 16:42</td>
                                            <td class="py-4">
                                                <button class="text-primary hover:underline text-sm">查看详情</button>
                                            </td>
                                        </tr>
                                        <tr class="transaction-item border-b border-white/5">
                                            <td class="py-4 text-sm">#TRX-20250622-98765</td>
                                            <td class="py-4">
                                                <span class="px-2 py-1 bg-primary/20 text-primary rounded-full text-xs">购买</span>
                                            </td>
                                            <td class="py-4 font-medium">-150.00 USDT</td>
                                            <td class="py-4">
                                                <span class="px-2 py-1 bg-danger/20 text-danger rounded-full text-xs">已失败</span>
                                            </td>
                                            <td class="py-4 text-white/60 text-sm">2025-06-22 11:20</td>
                                            <td class="py-4">
                                                <button class="text-primary hover:underline text-sm">查看详情</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <!-- 分页 -->
                            <div class="mt-8 flex justify-between items-center">
                                <div class="text-white/60 text-sm">
                                    显示 1-5 条，共 24 条
                                </div>
                                
                                <div class="flex space-x-2">
                                    <button class="w-10 h-10 rounded-lg bg-dark border border-white/10 flex items-center justify-center text-white hover:bg-white/10 transition-colors">
                                        <i class="fa fa-angle-left"></i>
                                    </button>
                                    <button class="w-10 h-10 rounded-lg bg-primary text-white flex items-center justify-center">1</button>
                                    <button class="w-10 h-10 rounded-lg bg-dark border border-white/10 flex items-center justify-center text-white hover:bg-white/10 transition-colors">2</button>
                                    <button class="w-10 h-10 rounded-lg bg-dark border border-white/10 flex items-center justify-center text-white hover:bg-white/10 transition-colors">3</button>
                                    <button class="w-10 h-10 rounded-lg bg-dark border border-white/10 flex items-center justify-center text-white hover:bg-white/10 transition-colors">4</button>
                                    <button class="w-10 h-10 rounded-lg bg-dark border border-white/10 flex items-center justify-center text-white hover:bg-white/10 transition-colors">5</button>
                                    <button class="w-10 h-10 rounded-lg bg-dark border border-white/10 flex items-center justify-center text-white hover:bg-white/10 transition-colors">
                                        <i class="fa fa-angle-right"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>

            <!-- 页脚 -->
            <footer class="bg-dark-blue border-t border-white/10">
                <div class="container mx-auto px-4 py-12">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                        <div>
                            <div class="flex items-center space-x-2 mb-4">
                                <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
                                    <i class="fa fa-exchange text-white text-xl"></i>
                                </div>
                                <h2 class="text-xl font-bold bg-gradient-to-r from-primary to-success bg-clip-text text-transparent">USDT<span class="text-sm font-normal ml-1">Market</span></h2>
                            </div>
                            <p class="text-white/60 mb-4">安全、便捷的USDT交易平台，支持多种本币出售，平台担保交易，保障资金安全</p>
                            <div class="flex space-x-4">
                                <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center text-white hover:bg-primary transition-colors">
                                    <i class="fa fa-twitter"></i>
                                </a>
                                <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center text-white hover:bg-primary transition-colors">
                                    <i class="fa fa-telegram"></i>
                                </a>
                                <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center text-white hover:bg-primary transition-colors">
                                    <i class="fa fa-discord"></i>
                                </a>
                                <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center text-white hover:bg-primary transition-colors">
                                    <i class="fa fa-github"></i>
                                </a>
                            </div>
                        </div>
                        
                        <div>
                            <h3 class="text-lg font-bold mb-4">出售服务</h3>
                            <ul class="space-y-2">
                                <li><a href="#" class="text-white/60 hover:text-primary transition-colors">USDT出售流程</a></li>
                                <li><a href="#" class="text-white/60 hover:text-primary transition-colors">设置出售价格</a></li>
                                <li><a href="#" class="text-white/60 hover:text-primary transition-colors">添加收款方式</a></li>
                                <li><a href="#" class="text-white/60 hover:text-primary transition-colors">认证卖家权益</a></li>
                                <li><a href="#" class="text-white/60 hover:text-primary transition-colors">提现到银行卡</a></li>
                            </ul>
                        </div>
                        
                        <div>
                            <h3 class="text-lg font-bold mb-4">资源中心</h3>
                            <ul class="space-y-2">
                                <li><a href="#" class="text-white/60 hover:text-primary transition-colors">新手教程</a></li>
                                <li><a href="#" class="text-white/60 hover:text-primary transition-colors">安全指南</a></li>
                                <li><a href="#" class="text-white/60 hover:text-primary transition-colors">常见问题</a></li>
                                <li><a href="#" class="text-white/60 hover:text-primary transition-colors">交易规则</a></li>
                                <li><a href="#" class="text-white/60 hover:text-primary transition-colors">联系客服</a></li>
                            </ul>
                        </div>
                        
                        <div>
                            <h3 class="text-lg font-bold mb-4">法律合规</h3>
                            <ul class="space-y-2">
                                <li><a href="#" class="text-white/60 hover:text-primary transition-colors">隐私政策</a></li>
                                <li><a href="#" class="text-white/60 hover:text-primary transition-colors">服务条款</a></li>
                                <li><a href="#" class="text-white/60 hover:text-primary transition-colors">风险提示</a></li>
                                <li><a href="#" class="text-white/60 hover:text-primary transition-colors">合规声明</a></li>
                                <li><a href="#" class="text-white/60 hover:text-primary transition-colors">知识产权</a></li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="h-px bg-white/10 my-8"></div>
                    
                    <div class="flex flex-col md:flex-row justify-between items-center">
                        <p class="text-white/60 text-sm mb-4 md:mb-0">© 2025 USDTMarket. 保留所有权利。平台不参与任何资金交易，仅提供信息匹配服务。</p>
                        <div class="flex space-x-6">
                            <a href="#" class="text-white/60 hover:text-primary transition-colors text-sm">隐私政策</a>
                            <a href="#" class="text-white/60 hover:text-primary transition-colors text-sm">服务条款</a>
                            <a href="#" class="text-white/60 hover:text-primary transition-colors text-sm">风险提示</a>
                        </div>
                    </div>
                </div>
            </footer>

            <!-- JavaScript -->
            <script>
                // 导航栏滚动效果
                const navbar = document.getElementById('navbar');
                window.addEventListener('scroll', () => {
                    if (window.scrollY > 10) {
                        navbar.classList.add('bg-dark-blue/90');
                        navbar.classList.add('shadow-lg');
                    } else {
                        navbar.classList.remove('bg-dark-blue/90');
                        navbar.classList.remove('shadow-lg');
                    }
                });
                
                // 日期范围选择逻辑
                const dateSelect = document.getElementById('transaction-date');
                const dateRange = document.getElementById('date-range');
                const startDate = document.getElementById('start-date');
                const endDate = document.getElementById('end-date');
                
                dateSelect.addEventListener('change', () => {
                    if (dateSelect.value === 'custom') {
                        startDate.parentElement.style.display = 'block';
                        endDate.parentElement.style.display = 'block';
                    } else {
                        startDate.parentElement.style.display = 'none';
                        endDate.parentElement.style.display = 'none';
                    }
                });
                
                // 设置默认日期范围
                const today = new Date();
                const weekAgo = new Date();
                weekAgo.setDate(today.getDate() - 7);
                
                startDate.valueAsDate = weekAgo;
                endDate.valueAsDate = today;
                
                // 交易记录筛选逻辑
                document.querySelector('button:has(.fa-search)').addEventListener('click', () => {
                    // 这里添加筛选逻辑
                    alert('筛选功能已触发，实际项目中会根据选择的条件筛选交易记录');
                });
                
                // 重置筛选逻辑
                document.querySelector('button:has(.fa-refresh)').addEventListener('click', () => {
                    document.getElementById('transaction-type').value = 'all';
                    document.getElementById('transaction-status').value = 'all';
                    document.getElementById('transaction-date').value = '7days';
                    startDate.valueAsDate = weekAgo;
                    endDate.valueAsDate = today;
                    
                    startDate.parentElement.style.display = 'none';
                    endDate.parentElement.style.display = 'none';
                });
                
                // 导出功能逻辑
                document.querySelector('button:has(.fa-download)').addEventListener('click', () => {
                    alert('导出功能已触发，实际项目中会导出交易记录为CSV或Excel文件');
                });
                
                // 查看详情逻辑
                document.querySelectorAll('button:text("查看详情")').forEach(button => {
                    button.addEventListener('click', () => {
                        alert('查看详情功能已触发，实际项目中会显示交易的详细信息');
                    });
                });
            </script>
        </body>
        </html>
    